<template>
  <div class="home-bg padding-20">
    <scroll-box ref="scrollBox"></scroll-box>

    <div class="group-operation-box bg-color-fffff">
      <group-operating-norm @changeTime="changeTime" />
    </div>
    <div class="margin-top-20">
      <flow-rate ref="flowRate" title="现金流量" pageType="budget" :charts-data="chartsData" :select-time="selectTime" :showTopChart="true" :showCashGap="true" :hasIncome="true" :hasPay="true" :isOperate="true"></flow-rate>
      <flow-rate-table ref="flowRateTable" :isOperate="true" :charts-data="chartsData" :select-time="selectTime" :hasIncome="true" :hasPay="true"></flow-rate-table>
    </div>
    <financial-operation :selectTime="selectTime" />
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import groupOperatingNorm from './components/groupOperatingNorm';
  import financialOperation from './components/financialOperation';
  import WorkTableEvent from '@/pages/businessAssets/modeules/workTableEvent';
  import ActButtons from '@/pages/businessAssets/modeules/actButtons';
  import flowRate from '@c/homeChart/flowRate';
  import flowRateTable from '@c/homeChart/flowRateTable.vue';
  import scrollBox from '@c/scrollBox.vue';
  import { apiOperationIncomeCash } from '@a/about';

  export default {
    data() {
      return {
        selectTime: dayjs(new Date(new Date().getTime() - 24 * 30 * 60 * 60 * 1000)).format('YYYY-MM'),
        chartsData:{}
      };
    },
    methods: {
      async changeTime(selectTime) {
        this.selectTime = selectTime;
        this.getChartsData()
        await this.$nextTick()
        this.$refs.flowRate.getCompareTotal()
      },
      async getChartsData() {
        let res = await apiOperationIncomeCash({
          planYear: new Date(this.selectTime).getFullYear(),
          planMonth: new Date(this.selectTime).getMonth() + 1,
        });
        this.chartsData = res
      },
    },
    mounted(){
      this.getChartsData()
    },
    components: {
      groupOperatingNorm,
      financialOperation,
      WorkTableEvent,
      ActButtons,
      flowRate,
      flowRateTable,
      scrollBox,
    },
  };
</script>
